// /*
//  * Copyright (c) 2025 Huawei Device Co., Ltd.
//  * Licensed under the Apache License, Version 2.0 (the "License");
//  * you may not use this file except in compliance with the License.
//  * You may obtain a copy of the License at
//  *
//  *     http://www.apache.org/licenses/LICENSE-2.0
//  *
//  * Unless required by applicable law or agreed to in writing, software
//  * distributed under the License is distributed on an "AS IS" BASIS,
//  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//  * See the License for the specific language governing permissions and
//  * limitations under the License.
//  */

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import Touchit from './touchit';

function KnockSharePageRender(): JSX.Element {
  const [touchit, setTouchit] = useState<string | null>(null);

  if (touchit) {
    return <Touchit type={touchit} setTouchit={setTouchit}></Touchit>;
  } else {
    return (
      <>
        <View style={styles.title}>
          <Text style={styles.titleText}>碰一碰</Text>
        </View>
        <View style={styles.outBtn}>
          <TouchableOpacity
            onPress={(): void => {
              setTouchit('0');
            }}
            style={[touchit === '0' ? styles.bottonActive : styles.botton]}>
            <Text style={[touchit === '0' ? { color: '#fff' } : { color: '#0A59F7' }, styles.btnText]}>纯图片分享</Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={(): void => {
              setTouchit('1');
            }}
            style={[touchit === '1' ? styles.bottonActive : styles.botton]}>
            <Text style={[touchit === '1' ? { color: '#fff' } : { color: '#0A59F7' }, styles.btnText]}>
              沉浸式大卡布局
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={(): void => {
              setTouchit('2');
            }}
            style={[touchit === '2' ? styles.bottonActive : styles.botton]}>
            <Text style={[touchit === '2' ? { color: '#fff' } : { color: '#0A59F7' }, styles.btnText]}>
              白卡上下布局
            </Text>
          </TouchableOpacity>
        </View>
      </>
    );
  }
}
const styles = StyleSheet.create({
  title: {
    marginTop: '25%',
    left: 24,
    width: '100%',
    textAlign: 'left',
  },
  outBtn: {
    flex: 1,
    width: '100%',
    alignItems: 'center',
    justifyContent: 'flex-end',
    marginBottom: 44,
  },
  botton: {
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.05)',
    height: 40,
    marginTop: 12,
    borderRadius: 20,
  },
  bottonActive: {
    width: '75%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#0A59F7',
    height: 40,
    marginTop: 12,
    borderRadius: 20,
  },
  btnText: {
    fontSize: 16,
    fontWeight: '500',
  },
  titleText: {
    fontSize: 30,
    fontWeight: 'bold',
  },
});

export default KnockSharePageRender;
